.player.hide {
  transform: translateX(-100%);
}

.player {
  @apply fixed z-10 bottom-[2px] left-0;

  bottom: calc(2px + env(safe-area-inset-bottom));
  transform: translateX(0);
  transition: transform 0.5s;
}

.root {
  @apply rounded-lg;
}

.cover {
  height: 66px;
  width: 66px;

  @apply relative bg-gray bg-opacity-80;

  & .anime-frame {
    @apply absolute rounded-r-lg rounded-b-lg inset-0 select-none pointer-events-none;
  }

  & .pic,
  & {
    @apply rounded-r-lg rounded-b-lg;
  }
}
/* 
.player.play .cover .anime-frame {
  @apply border-solid border-t border-r border-t-gray-1 border-rt-gray-1 border-opacity-60;

  animation: ripples 5s ease both infinite;

  @screen phone {
    @apply !animate-none;
  }
} */
/* 
.frame {
  & div:nth-child(1) {
    animation-delay: 0s !important;
  }

  & div:nth-child(2) {
    animation-delay: 2.5s !important;
  }
  & div:nth-child(3) {
    animation-delay: 5s !important;
  }
}

@keyframes ripples {
  0% {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0.6;

    @apply rounded-r-lg rounded-b-lg;
  }

  60% {
    left: -50px;
    top: -50px;
    right: -50px;
    bottom: -50px;

    opacity: 0.4;

    border-radius: 40%;
  }

  80% {
    left: -50px;
    top: -50px;
    right: -50px;
    bottom: -50px;

    opacity: 0.1;
    border-radius: 50%;
  }

  to {
    left: -50px;
    top: -50px;
    right: -50px;
    bottom: -50px;

    opacity: 0;
    border-radius: 50%;
    transform: scale(1.2);
  }
} */

.control-btn {
  @apply absolute top-0 left-0 right-0 bottom-0 z-10 text-white;
  @apply shadow-lg cursor-pointer transition-all;

  font-size: 35px;

  & > svg {
    @apply shadow-2xl absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-500;

    top: 50%;
    left: 50%;
    filter: drop-shadow(0 0 6px black);
  }
}

.player.play .control-btn {
  font-size: 24px;

  @apply justify-end items-end;

  & > svg {
    top: calc(80%);
    left: calc(80%);
  }
}

.cover:hover + .tip,
.tip:hover {
  @apply opacity-100 visible;
}

.tip {
  @apply absolute top-0 bottom-0 whitespace-nowrap truncate;
  @apply flex flex-col justify-around py-3 cursor-pointer;
  @apply transition-all opacity-0 duration-300 invisible;

  margin-left: 66px;
  padding-left: 1.5em;
  min-width: 150px;
  max-width: calc(50vw - 66px);

  & > p {
    @apply m-0 leading-6;
  }
}
